<template>
  <view class="content">
    <view class="section-0">
      <view class="section-body">
        <view class="list">
          <view class="comment">
            <view class="form">
              <view class="wrapper">
                <view class="form-item">
                  <text class="label">扣分</text>
                  <u--input
                    placeholderClass="input-placeholder"
                    class="input-body"
                    type="number"
                    maxlength="3"
                    placeholder="请输入扣分"
                    v-model="score"
                  ></u--input>
                </view>
              </view>
              <view class="wrapper3">
                <view class="form-item">
                  <text class="label">评价</text>
                  <u--textarea
                    v-model="content"
                    placeholder="请输入评价内容"
                    class="evaluation"
					count 
                  ></u--textarea>
                </view>
              </view>
              <view class="wrappers">
                <view class="form-item">
                  <text class="label">照片</text>
                  <view class="outbox">
                    <u-upload
                      :fileList="fileList"
                      :previewFullImage="true"
                      @afterRead="afterRead"
                      @delete="deletePic"
                      multiple
                      :maxCount="6"
                    ></u-upload>
                  </view>
                </view>
              </view>
            </view>
            <view class="custom-button" @click="submit()">提交</view>
          </view>
          <view class="com-title">评价记录</view>
          <view class="item" v-for="(item, index) in commentList" :key="index">
            <view>扣分：{{ item.score }}分</view>
            <view class="info"> 扣分原因：{{ item.content }} </view>
            <image
              :src="item.pic.file_path"
              mode="aspectFit"
              :class="`info-img ${item.pic_id === '' ? 'test' : ''}`"
            ></image>
            <view class="time">
              {{ item.create_time }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { personCommentApi, commentListApi } from "@/api/person.js";
import { uploadUrl } from "@/baseUrl.js";
export default {
  data() {
    return {
      count: 5,
      score: "",
      content: "",
      commentId: "",
      fileList: [],
      commentList: [],
    };
  },
  onLoad(data) {
    this.commentId = data.commentId;
    // this.selectList();
  },
  onShow() {
    this.selectList();
  },
  methods: {
    async submit() {
      if (this.content != "" && this.score != "") {
        let j = await personCommentApi({
          id: this.commentId,
          point: this.score,
          content: this.content,
          pic_id: this.fileList[0] ? this.fileList[0].url : "",
        });
        if ((j.code = 1)) {
          uni.showToast({
            title: "提交成功",
            icon: "none",
            duration: 1000,
          });
          this.selectList();
          this.score = "";
          this.content = "";
          this.pic_id = "";
          this.fileList = [];
        }
      } else {
        uni.showToast({
          title: "请完善评价信息",
          icon: "none",
          duration: 1000,
        });
      }
    },
    async selectList() {
      let j = await commentListApi({
        id: this.commentId,
      });
      if (j.data.code == 1) {
        this.commentList = j.data.data.data;
      }
    },
    // 处理图片相关
    // 删除图片
    deletePic(event) {
      this[`fileList`].splice(event.index, 1);
    },
    // 新增图片
    async afterRead(event) {
      // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file);
      let fileListLen = this[`fileList`].length;
      lists.map((item) => {
        this[`fileList`].push({
          ...item,
          status: "uploading",
          message: "上传中",
        });
      });
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise(lists[i].url);
        let item = this[`fileList`][fileListLen];
        this[`fileList`].splice(
          fileListLen,
          1,
          Object.assign(item, {
            status: "success",
            message: "",
            url: result.data.file_id,
          })
        );
        fileListLen++;
      }
    },
    uploadFilePromise(url) {
      return new Promise((resolve, reject) => {
        let a = uni.uploadFile({
          url: uploadUrl, // 仅为示例，非真实的接口地址
          filePath: url,
          name: "file",
          formData: {
            user: "test",
          },
          success: (res) => {
            setTimeout(() => {
              resolve(JSON.parse(res.data));
            }, 1000);
          },
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  .section-0 {
    width: 100%;
    background-color: #3a5df5;
    .section-body {
      padding-top: 38rpx;
      box-sizing: border-box;
      width: 100%;
      padding-left: 40rpx;
      padding-right: 40rpx;
      padding-bottom: 50rpx;
      height: 300rpx;
      background-color: #fff;
      background-size: cover;
      background-repeat: no-repeat;
      border-top-left-radius: 50rpx;
      border-top-right-radius: 50rpx;
      .list {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: center;
        .com-title {
          font-weight: bold;
          margin-bottom: 20rpx;
        }
        .rate-pd {
          margin-left: -8rpx;
        }
        .item {
          display: flex;
          flex-direction: column;
          align-content: center;
          width: 670rpx;
          background-color: #ffffff;
          border-radius: 35rpx;
          box-shadow: 0 0 20rpx 10rpx rgba(#bcbcb5, 0.17);
          box-sizing: border-box;
          padding: 30rpx;
          @include clear();
          margin-bottom: 28rpx;
          font-size: 26rpx;
          .test {
            display: none;
          }
          .info {
            padding: 5rpx 0;
          }
          .info-img {
            width: 100%;
            height: 250rpx;
            border: 1px solid #f2f2f2;
            margin-top: 10rpx;
            border-radius: 30rpx;
          }
          .time {
            margin-top: 10rpx;
            font-size: 22rpx;
          }
        }
        .comment {
          display: flex;
          flex-direction: column;
          align-content: center;
          width: 670rpx;
          background-color: #ffffff;
          border-radius: 35rpx;
          box-shadow: 0 0 20rpx 10rpx rgba(#bcbcb5, 0.17);
          box-sizing: border-box;
          padding: 30rpx;
          @include clear();
          margin-bottom: 28rpx;
          .title {
            font-weight: bolder;
            margin-bottom: 10rpx;
          }
          .info2 {
            padding: 5rpx 0;
            font-size: 26rpx;
          }
          .info2-img {
            margin-top: 10rpx;
            border-radius: 50rpx;
            // 去掉默认的背景色
            background-color: #ffffff;
          }
          .time2 {
            margin-top: 10rpx;
            font-size: 22rpx;
          }
        }
      }
      .icon-tupian {
        position: absolute;
        right: 25rpx;
        line-height: 44rpx;
        color: #1534ce;
        font-size: 28rpx;
      }
      .form {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
        @include clear();

        .wrapper {
          width: 100%;
          border-radius: 35rpx;
          background-size: cover;
          background-repeat: no-repeat;
          overflow: hidden;
          box-sizing: border-box;
          box-shadow: 0 0 20rpx 10rpx rgba(#bcbcb5, 0.17);
          margin-bottom: 40rpx;
          padding-top: 36rpx;
          font-size: 27rpx;
          .form-item {
            width: 662rpx;
            height: 48rpx;
            border-radius: 20rpx;
            margin: 0 auto;
            margin-bottom: 25rpx;

            @include clear();
            .label {
              float: left;
              width: 101rpx;
              height: 48rpx;
              text-align: center;
              line-height: 44rpx;
              font-size: 28rpx;
              font-weight: normal;
              font-stretch: normal;
              letter-spacing: 0rpx;
              margin-top: -2rpx;
              margin-left: 9.5rpx;
            }
            .state {
              background-color: #e0e0e0 !important;
            }

            .input-body {
              box-sizing: border-box;
              height: 59rpx;
              width: 466rpx;
              border-radius: 36rpx;
              padding: 0 !important;
              border: 1px solid #1534ce !important;
              padding-left: 30rpx !important;
              padding-right: 30rpx !important;
              margin-top: -10rpx;
              font-size: 26rpx;
              font-weight: normal;
              font-stretch: normal;
              letter-spacing: 0rpx;
              color: rgba(0, 0, 0, 0.7);
            }
            .input-placeholder {
              font-size: 26rpx;
              font-weight: normal;
              font-stretch: normal;
              letter-spacing: 0rpx;
              color: rgba(0, 0, 0, 0.5);
            }
          }
          .title {
            margin-bottom: 38rpx;
            .workmanshipIndex {
              margin-left: 10rpx;
            }
            .workmanshipNumber {
              margin-left: 92rpx;
            }
            .outedit {
              .edit {
                color: #0535d6;
                width: 46rpx;
                height: 46rpx;
                font-size: 23rpx;
                margin-left: 111rpx;
              }
            }
          }
          .workmanshipLeft {
            border: 2rpx solid #efefef;
            width: 134rpx;
            height: 113rpx;
            position: absolute;
            margin-top: -11.5rpx;
            padding-top: 19rpx;
            background: #efefef;
            border-radius: 19rpx;
            .pictureTop {
              color: #b8b8b8;
              margin-top: 10px;
              overflow: hidden;
              margin-left: 29rpx;
              font-size: 38rpx;
            }
            .pictureBottom {
              color: #b8b8b8;
              margin-left: 29rpx;
              font-size: 38rpx;
            }
          }
          .workmanshipRight {
            margin-left: 195rpx;
          }
        }
        .textarea-box {
          .textarea-com {
            display: block;
            border: solid 2rpx #1534ce;
            border-radius: 20rpx;
            padding: 10rpx;
            text-align: initial;
            font-size: 20rpx;
            margin: 15rpx 0;
          }
        }
        .form-label {
          display: inline-block;
          font-size: 26rpx;
          font-weight: bold;
          font-stretch: normal;
          line-height: 48rpx;
          letter-spacing: 0rpx;
          color: #46464a;
          float: left;
        }

        // .form-item {
        //   display: inline-block;
        //   float: left;
        //   width: 464rpx;
        //   height: 48rpx;
        //   border-radius: 20rpx;
        //   border: solid 2rpx #1534ce;
        //   margin: 0 auto;
        //   @include clear();
        //   .label {
        //     float: left;
        //     width: 134rpx;
        //     height: 48rpx;
        //     text-align: center;
        //     line-height: 44rpx;
        //     font-size: 26rpx;
        //     font-weight: normal;
        //     font-stretch: normal;
        //     letter-spacing: 0rpx;
        //     color: #1534ce;
        //   }
        // }
      }
    }
    .wrapper3 {
      height: 307rpx;
      width: 100%;
      border-radius: 35rpx;
      background-size: cover;
      background-repeat: no-repeat;
      overflow: hidden;
      box-sizing: border-box;
      box-shadow: 0 0 20rpx 10rpx rgba(#bcbcb5, 0.17);
      margin-bottom: 40rpx;
      padding-top: 36rpx;
      font-size: 27rpx;
      .form-item {
        width: 662rpx;
        height: 48rpx;
        border-radius: 20rpx;
        margin: 0 auto;
        margin-bottom: 25rpx;

        @include clear();
        .label {
          float: left;
          width: 101rpx;
          height: 48rpx;
          text-align: center;
          line-height: 44rpx;
          font-size: 28rpx;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0rpx;
          margin-top: -2rpx;
          margin-left: 9.5rpx;
        }
        .evaluation {
          width: 437rpx;
          height: 192rpx;
		  border-radius: 23rpx;
        }
      }
    }
    .wrappers {
      width: 100%;
      display: flex;
      border-radius: 35rpx;
      background-size: cover;
      background-repeat: no-repeat;
      overflow: hidden;
      box-sizing: border-box;
      box-shadow: 0 0 20rpx 10rpx rgba(#bcbcb5, 0.17);
      padding: 28rpx 40rpx;
      padding-top: 15rpx;
      margin-bottom: 40rpx;
      font-size: 27rpx;
      height: 192rpx;
      .label {
        float: left;
        width: 101rpx;
        height: 48rpx;
        text-align: center;
        line-height: 44rpx;
        font-size: 28rpx;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0rpx;
        margin-top: 60rpx;
        margin-left: -23rpx;
      }
      .pic {
        margin-top: 57.6rpx !important;
      }
      .outbox {
        display: flex;
        position: relative;
        width: 153.6rpx !important;
        height: 153.6rpx !important;
        background-color: #f1edf1;
        margin-left: 132.5rpx;
        margin-top: 6rpx !important;
        .usimg {
          position: absolute;
          z-index: 999;
          width: 153.6rpx;
          height: 153.6rpx;
        }
        .cha {
          position: absolute;
          left: 140rpx;
          top: -38rpx;
          font-size: 52rpx;
          color: red;
        }
      }
    }
    .custom-button {
      margin-top: 20rpx;
      margin-bottom: 10rpx;
      box-shadow: 0rpx 13rpx 35rpx 0rpx rgba(60, 90, 214, 0.42);
    }
  }
}
</style>
